<template>
    <div class="person">
        <h2>姓名：{{ name }}</h2>
        <h2>年龄：{{ age }}</h2>
        <h2>信息：{{ intro.age }} {{ intro.name }}</h2>
        <button @click="changeName">修改名字</button>
        <button @click="changeAge">修改年龄</button>
        <button @click="showTel">查看联系方式</button>
        <button @click="changeCourse">修改课程</button>
        <button @click="changeInfo">修改对象 {{ intro.name }}</button>
        <ul>
            <li v-for="c in courses" :key="c.id">{{ c.name }}</li>
        </ul>
    </div>
</template>

<!-- <script lang="ts">
export default {
    name :'Person3',
}
</script> -->

<script lang="ts" setup name="Person234">
    import {reactive, ref} from 'vue'
    //定义数据
    let name = ref("斗战胜佛")
    let age = ref(28)
    let tel = '13999999999'
    //定义方法
    function changeName(){
        name.value = "孙悟空"
    }
    function changeAge(){
        age.value++
        alert(age.value)
    }
    function showTel(){
        alert(tel)
    }

    const courses = reactive([
        {id:'course_id000000001', name:'Vue3'},
        {id:'course_id000000002', name:'SpringBoot'},
        {id:'course_id000000003', name:'RocketMQ'},
        {id:'course_id000000004', name:'fontawesome'},
    ])

    const changeCourse = () => {
        courses[0].name = '和平相处'
    }

    const intro = reactive({
        name: '一壶水',
        age: 300
    })
    const changeInfo = () => {
        Object.assign(intro, {name: '能积微者，速成',age: 100})
    }

</script>

<style scoped>
.person {
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}


button{
    border: none;
    margin: 0;
    padding: 0;
    outline: none;
    border-radius: 0;
    background-color: transparent;
    line-height: normal;
}
button::after {
    border: none;
}

</style>